<template>
    <div>
      <!-- 组件传值 父--子
        v-bind 绑定变量  可以简写为: 
      -->
      <Title :title="title"></Title>
      <!-- 1.先提供图表容器 提供宽高 ref当前元素模板引用 类似于id  -->
      <div style="height:150px" ref="box"></div>
    </div>
  </template>
  <script setup>
  
  import Title from './Title.vue';
  //引入moment
  import moment  from 'moment';
  // 引入get请求 
  import {get} from '@/utils/request.js'
  import { ref, onMounted } from 'vue';
  // 引入折线图构造函数  
  import { Line } from '@antv/g2plot';
  
  const title = ref('实时温度曲线');//{value:"实时湿度曲线"}
  // 声明模板引用 
  const box = ref(null);//{value:null}
  // 声明一个空数组接收后端获取的数据 
  let temData = ref([]);
  // 声明创建折线图表实例函数 
  const loadLine = () => {
    // new Line(图表容器id,{图表配置项})
    const line = new Line(box.value, {
      // 图表数据源 
      data:temData.value,
      xField: 'time',
      yField: 'temperature',
      // x y轴配置项 
      xAxis: {
        // 文本 
        label: {
          // 旋转属性 
          rotate: -45,
          style: {
            fill: 'white'
          }
        }
      },
      yAxis: {
        // 文本 
        label: {
          style: {
            fill: 'white'
          }
        }
      },
      label: {
        style: {
          fill: "white",
          // fontSize:18
        }
      },
      point: {
        size: 5,
        shape: 'diamond',
        style: {
          fill: 'white',
          stroke: '#5B8FF9',
          lineWidth: 2,
        },
      },
      // 给折线图设置动画  
      animation: {
        appear: {
          animation: 'wave-in',
          duration: 3000,//3000ms 3s
        },
      },
      // 设置曲线是否平滑 
      smooth:true,
      tooltip: { showMarkers: false },
      state: {
        active: {
          style: {
            shadowBlur: 4,
            stroke: '#000',
            fill: 'red',
          },
        },
      },
      interactions: [{ type: 'marker-active' }],
    });
    line.render();
  };
  // 声明获取当天数据函数 
  const getTemData = async ()=>{
    let response =await get('/dashboard/pageQueryTodayData',{
      page:1,
      pageSize:60
    });
    response.data.list.forEach((item,index,arr)=>{
        //
        arr[0].temperature=15.4;
        item.time=moment(item.insert_time).format('HH:mm')
    });
    //由于数据采集可能一样 每隔几条取一条
    let temp=[];
    for(var i=0;i<response.data.list.length;i++){
        //下标除以十等于0
        if(i%8==0){
           // 将符合条件的数据添加到temp
           temp.push(response.data.list[i])
        }
    }
    temData.value =temp;
  }
  // 生命周期 可以获取dom 节点  标签 ref=box
  onMounted(async() => {
    // 调用获取数据函数  先获取数据再给图表使用 
    await getTemData();
    loadLine();//加载折线图 
  })
  
  </script>
  <style scoped lang="less"></style>